<template>
	<div>
		<zh-space>
			<zh-card title="">
				<zh-form ref="orgFrom" :model="state.queryUserParam">
					<zh-form-select
						v-model="state.queryUserParam.searchType"
						label="查询类型"
						:options="state.searchTypeData"
						prop="searchType"
						placeholder="默认查询未授权用户"
						@change="searchTypeChange"
					>
					</zh-form-select>
					<zh-form-input label="姓名" v-model="state.queryUserParam.fullName" prop="fullName" placeholder="支持模糊查询" />
					<template v-if="state.advanced">
						<zh-form-input label="用户名" v-model="state.queryUserParam.userName" prop="userName" placeholder="支持模糊查询" />
						<zh-form-cascader
							prop="orgIds"
							label="所属组织"
							placeholder="支持多选"
							multiple
							:props="{ label: 'title', disabled: '' }"
							v-model="state.queryUserParam.orgIds"
							:options="state.orgSelectTreeData"
						></zh-form-cascader>
						<zh-form-select
							prop="status"
							label="状态"
							placeholder="单选"
							:options="state.statusData"
							v-model="state.queryUserParam.status"
						></zh-form-select>
						<zh-form-select
							prop="userTypes"
							label="用户类型"
							v-model="state.queryUserParam.userTypes"
							multiple
							placeholder="支持多选"
							:options="state.dictData.userType"
						>
						</zh-form-select>
					</template>
					<zh-form-query v-model="state.advanced" :formRef="orgFrom" @query-click="findUserListBtn"></zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				ref="userListTable"
				:height="600"
				:columns="state.userColumn"
				:data="state.userTableData"
				:disabled="false"
				highlight-current-row
				:loading="state.userLoading"
				:checkbox-config="{ trigger: 'row' }"
			>
				<template #status_default="{ row }">
					<zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" />
				</template>
			</zh-table>
		</zh-space>
	</div>
</template>

<script lang="ts" setup name="OrgUserForm">
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
const props = defineProps({
	orgInfo: {
		type: Object,
		default: () => {},
		required: false,
	},
});
const state :any = reactive({
	description: '组织授权用户界面',
	// 高级搜索 展开/关闭
	advanced: false,
	dictData: {} as any,
	orgSelectTreeValue: undefined,
	orgSelectTreeData: [],
	userChecked: [] as any[],
	// 用户查询条件
	queryUserParam: {} as any,
	labelCol: {
		xs: { span: 24 },
		sm: { span: 7 },
	},
	wrapperCol: {
		xs: { span: 24 },
		sm: { span: 17 },
	},
	searchTypeData: [
		{ dictKey: '1', dictValue: '从未授权用户' },
		{ dictKey: '2', dictValue: '已授权用户' },
		{ dictKey: '3', dictValue: '全部' },
	],
	statusData: [
		{ dictKey: '1', dictValue: '启用' },
		{ dictKey: '0', dictValue: '禁用' },
	],
	// 组织id
	orgId: null,
	// 用户列表参数
	userTableData: [],
	userLoading: false,
	userTablePage: {
		total: 0,
		pageNum: 1,
		currentPage: 1,
		pageSize: 20,
	},
	userColumn: [
		{ type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'userId', title: '用户Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'userName', title: '用户名', fixed: 'left', align: 'center', width: 150 },
		{ field: 'fullName', title: '姓名', align: 'center', width: 150 },
		{ field: 'userType', title: '用户类型key', visible: false, align: 'center', width: 150 },
		{ field: 'userTypeName', title: '用户类型', align: 'center', width: 150 },
		{
			field: 'status',
			title: '状态',
			align: 'center',
			width: 80,
			slots: {
				default: 'status_default',
			},
		},
		{ field: 'email', title: '电子邮箱', align: 'center', showOverflow: true, width: 150 },
		{ field: 'cellphone', title: '手机', align: 'center', width: 100 },
		{ field: 'idcard', title: '身份证', align: 'center', width: 150 },
		{ field: 'address', title: '地址', align: 'center', showOverflow: true, width: 200 },
		{ field: 'officePhone', title: '办公室电话', align: 'center', width: 100 },
		{ field: 'shortPhone', title: '短号', align: 'center', width: 60 },
		{ field: 'orgId', title: '所属组织', align: 'center', showOverflow: true, width: 150 },
		{ field: 'orgName', title: '所属组织', align: 'center', showOverflow: true, width: 150 },
		{ field: 'superiorsName', title: '直接上级', align: 'center', width: 150 },
		{ field: 'regdate', title: '创建日期', align: 'center', width: 80 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 250 },
	],
});

const userListTable = ref();
const orgFrom = ref();

function findUserListBtn() {
	if (state.orgId) {
		state.userTablePage.pageNum = 1;
		state.userTablePage.currentPage = 1;
		findUserList();
	} else {
		$messageBox.warning('没有传入组织id', '系统异常提示');
	}
}
function findUserList() {
	if (state.orgId) {
		if(props.orgInfo.disabled){
			state.userTableData = [];
			return;
		}
		state.userLoading = true;
		const params: any = Object.assign(state.queryUserParam, state.userTablePage);
		params.orgId = state.orgId;
		setTimeout(() => {
			$http
				.post($api.system.getOrgPrivilegeUserList.url, params)
				.then((res) => {
					state.userTableData = res.result.list;
					state.userTablePage.total = res.result.total;
					state.userTablePage.pageNum = res.result.pageNum;
					state.userTablePage.currentPage = res.result.pageNum;
					state.userTablePage.pageSize = res.result.pageSize;
					state.userLoading = false;
				})
				.catch(() => {
					state.userLoading = false;
				});
		}, 50);
	} else {
		$messageBox.warning('没有传入组织id', '系统异常提示');
	}
}
function searchTypeChange() {
	findUserList();
}

const params = {
	dictFields: 'userType',
};
$http.post($api.system.getBatchDict.url, params).then((res) => {
	state.dictData = res.result;
});
// 下拉组织树初始化
$http.post($api.system.getOrgSelectTree.url, params).then((res) => {
	state.orgSelectTreeData = res.result;
});
// 初始化数据
const queryParam = {
	searchType: '1',
};
state.queryUserParam = queryParam;
onMounted(() => {
  if (props.orgInfo) {
    state.orgId = props.orgInfo.orgId;
  } else {
    state.orgId = null;
  }
	findUserList();
});
defineExpose({ userListTable });
</script>
